Skip to main content

👀 Preview

The Preview feature in AppStruct allows you to view and interact with your project as your end users would, without the need to publish it first. It provides an opportunity to evaluate the layout, functionality, and responsiveness of your application on different devices (desktop, tablet, mobile) before going live.

This guide will provide a step-by-step explanation on how to use the Preview feature to simulate your app’s behavior.

Accessing the Preview Mode​

  1. In your AppStruct workspace, locate the "Preview" button in the Top Toolbar at the upper-right corner of the screen.
  2. Click on the "Preview" button to launch the Preview Mode of your project.
  3. Once in Preview Mode, you will see a simulated view of your application that behaves similarly to how it will appear to your users.
  4. Click on a device icon to switch the preview to that particular screen size.
  • Desktop View: Use this to see how your app appears on larger screens.
  • Tablet View: Test how your app looks on medium-sized screens.
  • Mobile View: Ensure it looks good on small screens.

Testing Actions and Interactivity​

In Preview Mode, you can test all interactive elements in your app to ensure that they function as intended.

  1. Interact with components that have Click Actions assigned (e.g., buttons with "Go Back" or "Navigation Link" actions).
  2. Ensure that all navigation links take you to the correct screens or external URLs.
  3. Test forms, input fields, checkboxes, radio buttons, and other interactive elements to ensure that they are functioning correctly.
  4. Responsive Testing: Verify that components adapt correctly based on the device view (Desktop, Tablet, Mobile).
  5. Ensure that the Adaptive Layout settings are working as expected and that components are visible and styled appropriately for each device.

Best Practices​

To get the most out of the Preview feature, consider these best practices:

  1. Test Regularly:
    • Preview your project frequently throughout the design process to catch and correct issues early.
  2. Use All Device Views:
    • Always switch between Desktop, Tablet, and Mobile views to ensure that your app is fully responsive.
  3. Check Interactivity:
    • Test all clickable components, form submissions, and navigation links to verify that everything works as expected.
  4. Evaluate User Experience:
    • Ensure that user flows are intuitive and that transitions between screens are smooth.

Troubleshooting​

If you encounter issues while using the Preview feature, refer to the troubleshooting guide below:

Issue 1: Actions Are Not Working in Preview

  • Solution:
    • Verify that the Click Actions (e.g., Navigation Link, Go Back) are correctly set up under the Left Toolbar.
    • Ensure that all components have the correct settings saved.

Issue 2: Components Do Not Appear in Preview

  • Solution:
    • Check the Adaptive Layout settings to ensure that the component is set to be visible on the selected device type.
    • Ensure that components are not hidden behind other elements.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].

Happy Previewing with AppStruct!